<template>
  <div class="app-container">
    <h1>小组信息管理</h1>

    <el-divider/>

    <el-form :inline="true" :model="groupPageRequest" class="demo-form-inline">
      <el-form-item label="组长">
        <el-select v-model="groupPageRequest.leaderId" clearable placeholder="请选择小组组长">
          <el-option
            v-for="leader in leaders"
            :label="leader.name"
            :key="leader.id"
            :value="leader.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="groupPageRequest.type" clearable placeholder="请选择小组类型">
          <el-option label="答辩" value="1"/>
          <el-option label="检查" value="2"/>
          <el-option label="开题" value="3"/>
          <el-option label="临时" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item label="人数">
        <el-input-number v-model="groupPageRequest.count" :max="100" :min="1" label="人数"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getGroupList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider/>

    <el-button-group>
      <el-button type="primary" size="small" @click="handleAddGroup">
        <svg-icon icon-class="add"/>
        新增小组
      </el-button>
      <el-button type="success" size="small" @click="handleAddGroupNumber">
        <svg-icon icon-class="update"/>
        分配小组成员
      </el-button>
      <el-button type="danger" size="small" @click="handleRemoveGroupNumber">
        <svg-icon icon-class="remove"/>
        移除小组成员
      </el-button>

      <el-popconfirm
        title="确定解散选中小组么？"
        icon-color="red"
        icon="el-icon-info"
        @confirm="submitRemoveGroups"
      >
        <el-button slot="reference" :disabled="isDisabled" type="danger" size="small">
          <svg-icon icon-class="remove"/>
          解散选中小组
        </el-button>
      </el-popconfirm>
    </el-button-group>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      stripe
      border
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        prop="name"
        label="名称"/>
      <el-table-column
        prop="leader"
        label="组长"/>
      <el-table-column
        prop="numbers"
        label="小组人员"/>
      <el-table-column
        prop="type"
        label="类型"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-popconfirm
            title="确定解散此小组么？"
            icon-color="red"
            icon="el-icon-info"
            @confirm="submitRemoveGroups(scope.row.id)"
          >
            <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete">解散</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <br>
    <div class="block">
      <el-pagination
        :current-page="page"
        :page-sizes="[5, 10, 15, 30, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changSize"
        @current-change="changePage"/>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="addGroupFlag" title="新增小组">
      <el-form :model="addGroup">
        <el-form-item :label-width="LabelWidth" label="组长">
          <el-select v-model="addGroup.numberId" placeholder="请选择小组组长">
            <el-option
              v-for="leader in teachers"
              :label="leader.name"
              :key="leader.id"
              :value="leader.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="LabelWidth" label="类型">
          <el-select v-model="addGroup.type" placeholder="请选择小组类型">
            <el-option label="答辩" value="1"/>
            <el-option label="检查" value="2"/>
            <el-option label="开题" value="3"/>
            <el-option label="临时" value="0"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGroupFlag = false">取 消</el-button>
        <el-button type="primary" @click="SubmitAddGroup">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="addGroupNumberFlag" title="分配成员">
      <el-form :model="addGroupNumber">
        <el-form-item :label-width="LabelWidth" label="小组">
          <el-select v-model="addGroupNumber.id" filterable placeholder="请选择小组" @change="handleGroupChange">
            <el-option
              v-for="group in groups"
              :label="group.name"
              :key="group.id"
              :value="group.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="LabelWidth" label="成员">
          <el-select v-model="addGroupNumber.numberId" filterable placeholder="请选择小组成员">
            <el-option
              v-for="groupNumber in groupNumbers"
              :label="groupNumber.name"
              :key="groupNumber.id"
              :value="groupNumber.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGroupNumberFlag = false">取 消</el-button>
        <el-button type="primary" @click="SubmitAddGroupNumber">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="removeGroupNumberFlag" title="移除成员">
      <el-form :model="removeGroupNumber">
        <el-form-item :label-width="LabelWidth" label="小组">
          <el-select v-model="removeGroupNumber.id" filterable placeholder="请选择小组" @change="handleRemoveGroupChange">
            <el-option
              v-for="group in removeGroups"
              :label="group.name"
              :key="group.id"
              :value="group.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="LabelWidth" label="成员">
          <el-select v-model="removeGroupNumber.numberId" filterable placeholder="请选择小组成员">
            <el-option
              v-for="groupNumber in removeGroupNumbers"
              :label="groupNumber.name"
              :key="groupNumber.id"
              :value="groupNumber.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="removeGroupNumberFlag = false">取 消</el-button>
        <el-button type="primary" @click="SubmitRemoveGroupNumber">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import groupApi from '@/api/admin/group'
import teacherApi from '@/api/admin/teacher'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      page: 1,
      total: 0,
      pageSize: 10,
      LabelWidth: '120px',
      isDisabled: true,
      multipleSelection: [],

      leaders: [],

      groupPageRequest: {
        page: 1,
        limit: 10,
        leaderId: null,
        type: null,
        count: undefined
      },

      addGroupFlag: false,
      addGroup: {
        numberId: null,
        type: null,
        name: '小组',
        numberType: 0
      },
      teachers: [],

      addGroupNumberFlag: false,
      addGroupNumber: {
        id: null,
        numberId: null,
        numberType: 1
      },
      groups: [],
      groupNumbers: [],

      removeGroupNumberFlag: false,
      removeGroupNumber: {
        id: null,
        numberId: null
      },
      removeGroups: [],
      removeGroupNumbers: []
    }
  },
  created() {
    this.getLeaderList()
    this.getGroupList()
  },
  methods: {
    getLeaderList() {
      groupApi.queryAllLeaders().then(res => {
        this.leaders = res.result
      }).catch(error => {
        console.log(error)
      })
    },
    getGroupList() {
      this.listLoading = true
      this.groupPageRequest.page = this.page
      this.groupPageRequest.limit = this.pageSize
      groupApi.getGroups(this.groupPageRequest).then(res => {
        this.listLoading = false
        this.total = Number.parseInt(res.result.counts)
        this.list = res.result.items
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].leader = this.list[i].members[0].name
          this.list[i].numbers = this.list[i].members.map(info => info.name).toString()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    changSize(pageSize) {
      this.pageSize = pageSize
      this.getGroupList()
    },
    changePage(page) {
      this.page = page
      this.getGroupList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(group => group.id)
      this.isDisabled = this.multipleSelection.length === 0
    },
    WarnMessage(msg) {
      this.$message({
        message: msg,
        type: 'warning'
      })
    },
    handleAddGroup() {
      if (this.teachers.length === 0) {
        teacherApi.queryAllTeachers().then(res => {
          this.teachers = res.result
        }).catch(error => {
          console.log(error)
        })
      }
      this.addGroupFlag = true
    },
    SubmitAddGroup() {
      if (this.addGroup.numberId === null) {
        this.WarnMessage('小组组长不能为空')
      } else if (this.addGroup.type === null) {
        this.WarnMessage('小组类型不能为空')
      } else {
        if (this.addGroup.type === '1') {
          this.addGroup.name = '-答辩小组'
        } else if (this.addGroup.type === '2') {
          this.addGroup.name = '-检查小组'
        } else if (this.addGroup.type === '3') {
          this.addGroup.name = '-开题小组'
        } else {
          this.addGroup.name = '-临时小组'
        }
        this.addGroup.name = this.teachers.find((tea) => {
          return tea.id === this.addGroup.numberId
        }).name + this.addGroup.name
        groupApi.addGroup(this.addGroup).then(res => {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.addGroupFlag = false
          this.addGroup.type = null
          this.addGroup.numberId = null
          this.getGroupList()
        }).catch(error => {
          console.log(error)
        })
      }
    },
    handleAddGroupNumber() {
      if (this.groups.length === 0) {
        groupApi.queryAllGroups().then(res => {
          this.groups = res.result
        }).catch(error => {
          console.log(error)
        })
      }
      this.addGroupNumberFlag = true
    },
    handleGroupChange() {
      if (this.addGroupNumber.id !== null) {
        groupApi.queryAllRemainTeachers(this.addGroupNumber.id).then(res => {
          this.groupNumbers = res.result
        }).catch(error => {
          console.log(error)
        })
      }
    },
    SubmitAddGroupNumber() {
      if (this.addGroupNumber.id === null) {
        this.WarnMessage('请选择待分配小组')
      } else if (this.addGroupNumber.numberId === null) {
        this.WarnMessage('请选择待分配成员')
      } else {
        groupApi.addGroupNumber(this.addGroupNumber).then(res => {
          this.$message({
            message: '分配成功',
            type: 'success'
          })
          this.addGroupNumberFlag = false
          this.addGroupNumber.id = null
          this.addGroupNumber.numberId = null
          this.getGroupList()
        }).catch(error => {
          console.log(error)
        })
      }
    },
    handleRemoveGroupNumber() {
      if (this.removeGroups.length === 0) {
        groupApi.queryAllGroups().then(res => {
          this.removeGroups = res.result
        }).catch(error => {
          console.log(error)
        })
      }
      this.removeGroupNumberFlag = true
    },
    handleRemoveGroupChange() {
      if (this.removeGroupNumber.id !== null) {
        groupApi.getGroupById(this.removeGroupNumber.id).then(res => {
          res.result.members.shift() // 第一个人为组长不应该被移除
          this.removeGroupNumbers = res.result.members
        }).catch(error => {
          console.log(error)
        })
      }
    },
    SubmitRemoveGroupNumber() {
      if (this.removeGroupNumber.id === null) {
        this.WarnMessage('请选择待移除小组')
      } else if (this.removeGroupNumber.numberId === null) {
        this.WarnMessage('请选择待移除成员')
      } else {
        groupApi.removeGroupNumber(this.removeGroupNumber).then(res => {
          this.$message({
            message: '移除成功',
            type: 'success'
          })
          this.removeGroupNumberFlag = false
          this.removeGroupNumber.id = null
          this.removeGroupNumber.numberId = null
          this.getGroupList()
        }).catch(error => {
          console.log(error)
        })
      }
    },
    submitRemoveGroups(id) {
      if (isNaN(id)) {
        groupApi.removeGroups(this.multipleSelection).then(res => {
          this.$message({
            message: '解散成功',
            type: 'success'
          })
          this.multipleSelection = []
          this.getGroupList()
        }).catch(error => {
          console.log(error)
        })
      } else {
        groupApi.removeGroup(id).then(res => {
          this.$message({
            message: '解散成功',
            type: 'success'
          })
          this.multipleSelection = []
          this.getGroupList()
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
}
</script>
